@import 'variables';
#audiocontent{
  position:fixed;
  bottom:0px;
  left:0px;
  right:0px;
  z-index:15;
  font-family: $helvetica;
  #progressBar {
     color:#fff;
     width:100%;
     height:48px;
     margin-top:100px;
     position:fixed;
     left:0;
     bottom:0;
     right:0;
     text-align:left;
     background:rgb(236, 236, 236);
     z-index:19;
     display:none;
     &.playing{
       display:block;
     }
     #episode-profile-image{
       height:48px;
       width:48px;
     }
     #animated-bars{
       position:absolute;
       bottom:-12px;
       left:-15px;
       width:80px;
       opacity:0.3;
       display:none;
       &.playing{
         display:block;
       }
     }
     #barPlayPause{
       height:48px;
       width:48px;
       background:rgb(32, 32, 32);
       position:absolute;
       left:48px;
       bottom:0px;
       cursor:pointer;
       .butt{
         width:30px;
         margin:10px 9px;
       }
       .pause-butt{
         display:none;
       }
       &.playing{
         .play-butt{
           display:none;
         }
         .pause-butt{
           display:block;
         }
       }
     }
     .showing{
       display:block;
     }
     .hidden{
       display:none;
     }
     #volume{
       height:48px;
       width:32px;
       background:rgb(32, 32, 32);
       position:absolute;
       left:96px;
       bottom:0px;
       cursor:pointer;
       img{
         padding:3px;
         margin-top:4px;
         margin-left:4px;
         margin-bottom:-11px;
       }
       #speed{
         font-weight:300;
         font-size:12px;
         padding:3px 0px;
         width:28px;
         margin-left:-0.5px;
         text-align:center;
         margin-top:2px;
         display:block;
         user-select: none;
         background:transparent;
         color:rgb(201, 201, 201);
       }
       .volume-icon-wrapper{
         padding:1px 0px;
       }
       #volumeindicator{
         .range-wrapper{
           position:absolute;
           top:0px;
           left:22px;
           background:rgb(32, 32, 32);
           z-index:30;
           width:0;
           overflow:hidden;
           transition: width 200ms ease-out 95ms;
           padding:8px 0px 5px;
           text-align:center;
           input{
             width:80%;
             cursor:pointer;
           }
         }
         @media screen and ( min-width: 430px ){
           &:hover{
             .range-wrapper{
               width:170px;
             }
           }
         }
       }
     }
     .buffer-wrapper{
       height:48px;
       position:absolute;
       left:128px;
       right:0;
       bottom:0;
       cursor:pointer;
       #progress {
          background-color:#00ffa3; // red
          height:48px;
          display:inline-block;
          position:relative;
          z-index:23;
          transition: width 0.25s ease-in-out;
       }
       #buffer {
          background-color:#96ffd9; // red
          height:48px;
          display:inline-block;
          position:absolute;
          bottom:0;
          z-index:22;
          transition: width 0.15s ease-in-out;
       }
       #time{
         position:absolute;
         right:30px;
         top:16px;
         z-index:23;
         color:rgb(161, 161, 161);
         font-size:13px;
         background:rgba(236, 236, 236, 0.74);
         padding:2px;
       }
       #closebutt {
          position: absolute;
          user-select: none;
          right: 3px;
          margin: 0px;
          padding: 0px;
          color: #535353;
          font-size: 13.5px;
          z-index: 25;
          height: 22px;
          width: 22px;
          transition: all 0.3s ease 0s;
          &:hover {
            color: #ff4343;
          }
       }
     }
  }
}

.navigation-progress{
  position:fixed;
  top:0;
  left:-20%;
  background:$green;
  z-index:100;
  height:43px;
  // display:none;
  width:0%;
  &.showing{
    display:block;
    width:140%;
    animation: grow-width 3200ms ease-out, pulsate 1.4s infinite ease-in-out;
    
  }
}

.live-link{
  color:$black;
}

.live-article-indicator{
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index:100;
}
.live-article-indicator-inner{
  padding:10px 20px;
  background: white;
  border: 2px solid $dark-purple;
  box-shadow: 5px 5px 0px $dark-purple;
  border-radius: 3px;
  max-width:calc(22vw + 96px);
  min-width:200px;
  display:none;
  @media screen and ( min-width: 1410px ){
    display:block;
  }
  &:hover{
    background: darkend($light-green, 3%);
  }
  .live-pre-header{
    font-size:1em;
    margin-top:2px;
    margin-left:25px;
    margin-bottom:15px;
    font-weight:800;
    font-family: $helvetica-condensed;
    font-stretch:condensed;
  }
  .live-article-title{
    font-size:1.4em;
    font-weight:600;
    margin: 5px 0px;
  }
  .live-user{
    font-weight: bold;
    color:$dark-medium-gray;
    img{
      height: 27px;
      width: 27px;
      border-radius: 100px;
      margin-right: 6px;
      vertical-align: -6px;
    }
  }
  .live-tags{
    margin: 8px 0px;
    color:$medium-gray;
    font-size:0.8em;
    .live-tag{
      margin-right:6px;
    }
  }
}

.live-exit-button{
  border:0px;
  background:transparent;
  position:absolute;
  top:12px;
  right:8px;
  padding: 5px 10px 1px;
  border-radius: 3px;
  &:hover{
    background:lighten($red,28%);
  }
  img{
    height:15px;
    width:15px;
  }
}


@keyframes grow-width {
  0%   { width: 0%; }
  100% { width: 140%; }
}

@keyframes pulsate {
    0% {opacity: 0.25;}
    50% {opacity: 1.0;}
    100% {opacity: 0.25;}
}

.pulsating-circle {
  position: absolute;
  left: 24px;
  top: 25px;
  transform: translateX(-50%) translateY(-50%);
  width: 22px;
  height: 22px;
  
  &:before {
    content: '';
    position: relative;
    display: block;
    width: 150%;
    height: 150%;
    box-sizing: border-box;
    margin-left: -25%;
    margin-top: -25%;
    border-radius: 45px;
    background-color: $dark-purple;
    animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  }
  
  &:after {
    content: '';
    position: absolute;
    left: 0; 
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: $dark-purple;
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0,0,0,.3);
    animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -.4s infinite;
  }
}

@keyframes pulse-ring {
  0% {
    transform: scale(.33);
  }
  80%, 100% {
    opacity: 0;
  }
}

@keyframes pulse-dot {
  0% {
    transform: scale(.8);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(.8);
  }
}